<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="../assets/js/api.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .center {
        margin: 0px auto;
    }

    .textcenter {
        text-align: center;
    }
</style>
<body>
<div id="app" class="center textcenter">
    <div>
        <el-input v-model="key" style="width:200px" placeholder="请输入内容"></el-input>

        <el-button type="success" @click="update()"  icon=" el-icon-search" circle></el-button>

    </div>
    <template>
        <el-table
                :data="borrowData"
                style="width: 80%"
                class="center"
                :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column
                    prop="username"
                    label="借阅者"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="bookname"
                    label="书名">
            </el-table-column>
            <el-table-column
                    prop="borrowdate"
                    label="借书时间">
            </el-table-column>
            <el-table-column
                    prop="isbn"
                    label="isbn">
            </el-table-column>
            <el-table-column
                    label="还书日期">
                <template slot-scope="scope">
                    {{scope.row.returndate==null?'未还书':scope.row.returndate}}
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <el-button type="success" plain size="small" @click="returnborrow(scope.row)" :disabled="scope.row.returndate!=null">还书</el-button>
                    <el-button type="danger" plain size="small" @click="deleteborrow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center">

            <el-pagination
                    class="center textcenter"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10,20,30,50]"
                    :page-size="pagesize"
                    layout="sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </template>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            borrowData: [{}],
            currentPage: 1,
            pagesize: 10,
            total: 0,
            key:'',

        }
        , created(){
            this.update()

        }
        , methods: {
            returnborrow(borrow){
                api.post("/borrow/update",borrow).then(res=>{
                    console.log(borrow,res)
                    if(res.state){
                        this.$message({
                            message: '还书成功',
                            center: true,
                            showClose: true,
                            type: 'success'
                        });
                        this.update();
                    }else{
                        this.$message({
                            message: res.message,
                            center: true,
                            showClose: true,
                            type: 'error'
                        });
                    }
                }).catch(res=>{
                    console.log(res);
                    this.$message({
                        message: '服务器异常',
                        center: true,
                        showClose: true,
                        type: 'error'
                    });
                })
            },deleteborrow (borrow){


                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.post("/borrow/delete",borrow).then(res=>{
                        if(res.state){
                            this.$message({
                                message: "删除成功",
                                center: true,
                                showClose: true,
                                type: 'success'
                            });
                            this.update()
                        }else{
                            this.$message({
                                message: res.message,
                                center: true,
                                showClose: true,
                                type: 'error'
                            });
                        }
                    }).catch(res=>{
                        this.$message({
                            message: '服务器异常',
                            center: true,
                            showClose: true,
                            type: 'error'
                        });
                        console.log(res);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${this.pagesize} 条`);
                this.update()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${this.currentPage}`);
                this.update()
            },
            update(){
                api.post("/borrow/listall",{pageNum: this.currentPage, pageSize: this.pagesize,key:this.key}).then(res=>{
                    console.log(res);
                    if(res.state){
                        this.borrowData=res.data.list;
                    }else{
                        this.$message({
                            message: res.message,
                            center: true,
                            showClose: true,
                            type: 'error'
                        });
                    }

                }).catch(res=>{
                    this.$message({
                        message: '服务器异常',
                        center: true,
                        showClose: true,
                        type: 'error'
                    });
                    console.log("error",res)
                })
            }

        }
    })
</script>
</body>
</html>